<template>
    <div class="scheduling">
        <div><img :src="'http://129.211.169.131:21005/images/headers/' + doctorImg" alt="">
            科室:丑科
        </div>
       <div class="content">
        <el-row class="row-bg" :gutter="5">
            <el-col :span="3" v-for="(v, i) in doctorDay " :key="i">
                <div class="day">{{ v.date }}</div>
                <div :class="{active:v.morning==0 ? false:true}" @click="v.morning==1?v.morning=0:v.morning=1">上午</div>
                <div  :class="{active:v.afternoon==0 ? false:true }" @click="v.afternoon==1?v.afternoon=0:v.afternoon=1">下午</div>
                <div  :class="{active:v.night==0 ? false:true}" @click="v.night==1?v.night=0:v.night=1">夜班</div>
            </el-col>
        </el-row>
       </div>
       <el-button @click="rostering">确定排班</el-button>

    </div>
</template>

<script setup lang="ts">
import { onMounted, computed,ref } from 'vue';
import { useStore } from 'vuex';
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'
const stroe = useStore()
const id=ref(2)
const router=useRouter()
onMounted(() => {

    if (localStorage.getItem('id')) {
      id.value=parseInt(localStorage.getItem('id'))
    }
    console.log(id.value);
    
    stroe.dispatch('jjy/A_getDoctor', {id:id.value})
})
//医生排班
// console.log(JSON.parse(stroe.state.jjy.doctorDay.date));
const doctorDay = computed(() => {
    return stroe.state.jjy.doctorDay.date
})
// 护士图片
const doctorImg = computed(() => {
    return stroe.state.jjy.doctorDay.head
})
//排班
function rostering(){
    console.log(doctorDay.value);
    if (localStorage.getItem('id')) {
      id.value=parseInt(localStorage.getItem('id'))
    }
    console.log(id.value);
    
    stroe.dispatch('jjy/A_rosteringDoctor',{id:id.value,newdate:doctorDay.value})
    ElMessage.success('排班成功')
    router.push('/nurse')

}

</script>

<style scoped lang="scss">
.el-col {
    margin: 15px 1px;

    text-align: center;
    padding: 0;
    div {
        background: #fff;
        height: 18px;
        margin: 1px 0;
    }
    .day {
        background: #07b9b9;

    }


}
.el-col:nth-child(2n){
    .day {
        background: #36b2ec;
    }
}
.el-row {
    margin: 0 auto;
}

img {
    width: 30px;
    height: 60px;
    border-radius: 20px;
}
.active{
    background: #00b578 !important;
}

</style>